<template>
	<view>
		<view class="" style="width: 100%;height: 100rpx;background-color: #fff;padding-top: 20rpx;">
			<view class=""
				style="display: flex;flex-direction: row;align-items: center;width: 100%;height: 100%;justify-content: space-between;">
				<view class=""
					style="height: 100%; color: #2979FF;display: flex;flex-direction: row;align-items: center;margin-left: 20rpx;">
					总销量：<text style="font-weight: bold;font-size: 35rpx;margin-right: 20rpx;">{{shopInfo.soldSum}}单</text> </view>
				<view class="" style="display: flex;flex-direction: row;margin-right: 20rpx;">
					<view class="" style="margin-right: 20rpx;"> <u-button size="mini" type="success" @click="addClass">分类管理</u-button>
					</view>
					<view class=""> <u-button size="mini" type="primary" @click="shopMange">添加商品</u-button> </view>
				</view>
			</view>
		</view>
		<view style="background-color: #fff;">
			<view>
				<view style="display: flex;padding: 20rpx 0;">
					<view class="shopBottomBox" style="width: 25%;background-color: #f8f8f8;height:85vh;">
						<scroll-view scroll-y="true" style="height: 100%;" :scroll-into-view="tocategoryId">
							<view v-for="item in categoryList" :key="item.id" @click="togoods(item.id)"
								:id="'category'+item.id" :class="(item.id==selectId)?'a':''"
								style="height: 100rpx;font-size: 28rpx;display: flex;align-items: center;justify-content: center;">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view style="width: 75%;padding: 0 20rpx;">
						<scroll-view show-scrollbar="false" scroll-y="true" style="height: 85vh;" @scroll="scroll"
							:scroll-into-view="togoodsId">
							<view v-for="item in categoryList" :key="item.id" :id="'goods'+item.id">
								<view
									style="padding: 10rpx 20rpx;background-color: #f8f8f8;position: sticky;top: 0;z-index: 10000;"
									:data-id="item.id" class="goods">
									{{item.name}}
								</view>
								<view class="" v-if=" !item.goodsList.length>0"
									style=" height: 100rpx;color: #dedede;;display: flex;flex-direction: row;justify-content: center;align-items: center;">
									暂无该分类商品
								</view>
								<view v-else style="margin: 30rpx 0;display: flex;position: relative;"
									v-for="goods in item.goodsList" :key="goods.id" @click="togoods(goods.id)">
									<!-- <image :src="sysConstant.FILE_SRC_PATH+goods.logoPath"
										style="width: 150rpx;height: 150rpx;border-radius: 8rpx;"></image> -->
									<view class="image-container">
										<image :src="sysConstant.FILE_SRC_PATH+goods.logoPath"
											style="width:150rpx;height: 150rpx;border-radius: 16rpx;"></image>
										<view v-if="goods.stock == 0" class="overlay">售罄</view>
									</view>
									<view
										style="width: 70%;margin-left: 20rpx;display: flex;justify-content: space-between;flex-direction: column;">
										<view
											style="font-size: 30rpx;color: #000;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
											{{goods.goodsName}}

										</view>
										<view class="" style="padding-top: 15rpx;">
											库存:{{goods.stock == -1 ? '充足' : goods.stock}}</view>
										<view class=""
											style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
											<view class="" style="padding-top: 5rpx;font-size: 25rpx;">
												<view class="beizhu">备注:{{goods.remark ?goods.remark:'暂无' }}</view>
											</view>

										</view>
										<view
											style="display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;top:2%;right: 5%;">
											<view class="" style="margin-bottom: 10rpx;"><u-button type="primary"
												@click="shopMange(goods.id)"	size="mini">修改</u-button></view>
											<u-button type="success" v-if="goods.goodsStatus == -1" size="mini"
												@click="grounding(goods.id)">上架</u-button>
											<u-button type="warning" v-if="goods.goodsStatus == 0" size="mini"
												@click="undercarriage(goods.id)">下架</u-button>
											<view class=""  style="margin-top: 10rpx;"><u-button :disabled="goods.goodsStatus == 0" type="error" @click="delGoods(goods.id)"
													size="mini">删除</u-button></view>
										</view>
										<view
											style="display: flex;align-items: center;justify-content: space-between;width: 100%; font-size: 26rpx;">

											<view class="beizhu" v-if="loginState"
												style="display: flex;flex-direction: row;align-items: center;font-size: 25rpx;">
												售价：<text
													style="color: red;text-decoration: line-through;">￥{{goods.sellPrice}}</text>
												<text style="margin-left: 5rpx;color: #F06000">￥</text>
												<text
													style="color: #F06000;font-size: 28rpx;">{{goods.memberPrice}}</text>
												<text style="margin-left: 5rpx;">/{{goods.unit}}</text>
											</view>
											<view v-else class=""
												style="display: flex;flex-direction: row;align-items: center;font-size: 20rpx;width: 250rpx;" >
												<view class="">
													售价:<text style="color: red;">{{goods.sellPrice}}</text>
												</view>
												<view class="" style="margin-left: 10rpx;">
													会员:<text style="color: #F06000;">{{goods.memberPrice}}</text>
												</view>
												<text class="shoujia" style="margin-left:5rpx;">/{{goods.unit}}</text>
											</view>


										</view>
									</view>
								</view>
							</view>
							<view style="height: 40vh;">
								<view style="margin-top: 120rpx;">
									<u-divider>已经到底</u-divider>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal show-cancel-button="true" v-model="onshow" @confirm="onconfirm" content="确认要上架该商品"></u-modal>
		<u-modal show-cancel-button="true" v-model="offshow" @confirm="offconfirm" content="确认要下架该商品"></u-modal>
		<u-modal show-cancel-button="true" v-model="delshow" @confirm="delconfirm" content="确认要删除该商品"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onshow: false,
				offshow:false,
				delshow:false,
				current: 0,
				contentHeight: 0,
				shopId: '',
				goodsList: [],
				categoryList: [],
				togoodsId: '',
				tocategoryId: '',
				selectId: '',
				isclick: false,
				sysConstant: this.sysConstant,
				goodsCart: [],
				carNum: 0,
				totalPrice: 0,
				cartShow: false,
				shop: '',
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				shopTimeList: [],
				goodsTop: '',
				appraiseList: [],
				shoping: false,
				goodsId: '',
				header: '',
				loginState: false,
				onArr: [],
				offArr:[],
				delArr:[],
				shopInfo:{}
			}
		},
		onLoad() {},
		onShow() {
			this.initGoods();
			this.initGoodsCategory();
			this.getInfo()
		},
		onShareAppMessage(options) {
			var that = this;
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: this.shop.shopName, // 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index?page=shop&shopId=' + this.shop.id, // 默认是当前页面，必须是以‘/'开头的完整路径
				imageUrl: this.sysConstant.FILE_SRC_PATH + this.shop
					.logoPath, //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},

			};
			// 返回shareObj
			return shareObj;
		},
		methods: {
			getInfo() {
				this.$u.get('/authorize/life/shop/info', {}).then(res => {
					console.log(res)
					if (res.success) {
						this.shopInfo = res.data
						console.log("我是店铺信息");
						console.log(this.shopInfo);
						// this.mobile = this.userInfo.phone
					} else {
						// this.$refs.uToast.show({
						// 	title: res.msg,
						// 	type: 'error',
						// })
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "请求失败",
						type: 'error',
					})
				})
			},
			initGoods() {
				this.$u.get("/life/goods/list", {status:0}).then(res => {
					console.log("我是商品列表");
					console.log(res);
					if (res.success) {
						let goodsList = res.data
						this.goodsList = goodsList
						let categoryList = this.categoryList;
						for (let i = 0; i < categoryList.length; i++) {
							let goodsList1 = []
							for (let j = 0; j < goodsList.length; j++) {
								if (categoryList[i].id === goodsList[j].categoryId) {
									goodsList1.push(goodsList[j])
								}
							}
							categoryList[i].goodsList = goodsList1
						}
						this.categoryList = []
						this.categoryList = categoryList
						console.log("我是分类列表");
						console.log(this.categoryList);
						console.log("我是商品列表");
						console.log(this.goodsList);
						// this.observer()
					}
				})
			},
			onconfirm() {
				this.$u.put("life/goods/on", this.onArr).then(res => {
					console.log("上架");
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "上架成功",
							type: 'success',
						})
						this.initGoods()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
			//上架
			grounding(e) {
				console.log(e);
				this.onArr = []
				this.onArr.push(e)
				this.onshow = true


			},
			offconfirm(){
				this.$u.put("life/goods/off", this.offArr).then(res => {
					console.log("下架");
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "下架成功",
							type: 'success',
						})
						this.initGoods()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
			//下架
			undercarriage(e) {
				console.log(e);
				this.offArr = []
				this.offArr.push(e)
				this.offshow = true;
				
			},
			//删除商品
			delconfirm(){
				this.$u.delete("life/goods/remove", this.delArr).then(res => {
					console.log("下架");
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: 'success',
						})
						this.initGoods()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
			shopMange(e){
				console.log(e);
				console.log(typeof(e));
				if(typeof(e) == 'string'){
					uni.navigateTo({
						url:'/pages/shopSonPage/add-edit-goods/add-edit-goods?id=' + e
					})
				}
				else{
					uni.navigateTo({
						url:'/pages/shopSonPage/add-edit-goods/add-edit-goods'
					})
				}
				
			},
			addClass(){
				uni.navigateTo({
					// url:'/pages/shopSonPage/add-edit-classification/add-edit-classification'
					url:'/pages/shopSonPage/classManage/classManage'
				})
			},
			delGoods(e){
				this.delArr = []
				this.delArr.push(e)
				this.delshow = true
			},
			initGoodsCategory() {
				this.$u.get("/life/goods/category/list", {
					goodsStatus:0
				}).then(res => {
					console.log(res);
					if (res.success) {
						this.categoryList = res.data
						this.initGoods();
					}
				})
			},
			togoods(id) {
				console.log(id)
				this.isclick = true;
				this.selectId = id
				this.togoodsId = 'goods' + id;

			},
			scroll: function(e) {
				console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
				//获取元素高度
				if (!this.isclick) {
					this.getElement()
				} else {
					this.isclick = false;
				}
			},
			getElement() {
				let _this = this
				let height = ""
				const query = uni.createSelectorQuery()
				query.selectAll('.goods').boundingClientRect()
				query.selectViewport().scrollOffset()
				// query.exec(function(res) {
				// 	console.log(res)
				// 	let list = res[0]
				// 	if (!_this.goodsTop) {
				// 		_this.goodsTop = res[0][0].top
				// 	}
				// 	for (let i = 0; i < list.length; i++) {
				// 		if (list[i].top == _this.goodsTop) {
				// 			_this.tocategoryId = 'category' + list[i].dataset.id

				// 			_this.selectId = list[i].dataset.id
				// 		}
				// 	}

				// })
			},

			// togoods(goodsId){
			// 	uni.navigateTo({
			// 		url:"/pages/goods/goods?shopId="+this.shopId+"&goodsId="+goodsId+"&shoping="+this.shoping
			// 	})
			// }

		}

	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	.a {
		background-color: #fff;
	}

	.settle {
		background-color: #40ae39;
	}

	.settle1 {
		background-color: #7b7b7b;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.image-container {
		position: relative;
		display: inline-block;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: red; */
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 35rpx;
	}

	.shopBottomBox {
		/* background-image: -moz-linear-gradient(45deg, rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: -webkit-linear-gradient(45deg,rgb(153, 133, 255), rgb(29, 218, 255));
		
		background-image: linear-gradient(45deg,rgb(153, 133, 255),rgb(29, 218, 255)); */
	}

	.beizhu {
		width: 230rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 这里的数字表示显示的行数，可以根据需要调整 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shoujia{
		width: 25%;
		/* background-color: red; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 这里的数字表示显示的行数，可以根据需要调整 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>